<template>
  <div class="icon-demo">
    <!-- 基础图标 -->
    <div class="demo-section">
      <h3>基础图标</h3>
      <div class="icon-list">
        <div class="icon-item">
          <van-icon name="chat-o" />
          <span>chat-o</span>
        </div>
        <div class="icon-item">
          <van-icon name="location-o" />
          <span>location-o</span>
        </div>
        <div class="icon-item">
          <van-icon name="like-o" />
          <span>like-o</span>
        </div>
        <div class="icon-item">
          <van-icon name="user-o" />
          <span>user-o</span>
        </div>
        <div class="icon-item">
          <van-icon name="search" />
          <span>search</span>
        </div>
      </div>
    </div>

    <!-- 徽标提示 -->
    <div class="demo-section">
      <h3>徽标提示</h3>
      <div class="icon-list">
        <div class="icon-item">
          <van-icon name="chat-o" dot />
          <span>小红点</span>
        </div>
        <div class="icon-item">
          <van-icon name="cart-o" badge="5" />
          <span>数字徽标</span>
        </div>
        <div class="icon-item">
          <van-icon name="success" badge="99+" />
          <span>最大值</span>
        </div>
      </div>
    </div>

    <!-- 图标颜色 -->
    <div class="demo-section">
      <h3>图标颜色</h3>
      <div class="icon-list">
        <div class="icon-item">
          <van-icon name="cart-o" color="#1989fa" />
          <span>蓝色</span>
        </div>
        <div class="icon-item">
          <van-icon name="fire-o" color="#ee0a24" />
          <span>红色</span>
        </div>
        <div class="icon-item">
          <van-icon name="success" color="#07c160" />
          <span>绿色</span>
        </div>
      </div>
    </div>

    <!-- 图标大小 -->
    <div class="demo-section">
      <h3>图标大小</h3>
      <div class="icon-list">
        <div class="icon-item">
          <van-icon name="chat-o" size="40" />
          <span>40px</span>
        </div>
        <div class="icon-item">
          <van-icon name="chat-o" size="30" />
          <span>30px</span>
        </div>
        <div class="icon-item">
          <van-icon name="chat-o" size="20" />
          <span>20px</span>
        </div>
      </div>
    </div>

    <!-- 图标旋转 -->
    <div class="demo-section">
      <h3>图标旋转</h3>
      <div class="icon-list">
        <div class="icon-item">
          <van-icon name="loading" class="loading" />
          <span>旋转动画</span>
        </div>
        <div class="icon-item">
          <van-icon name="star" class="rotate-90" />
          <span>90度</span>
        </div>
        <div class="icon-item">
          <van-icon name="star" class="rotate-180" />
          <span>180度</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 如果需要添加交互逻辑可以在这里编写
</script>

<style scoped>
.icon-demo {
  padding: 20px;
}

.demo-section {
  margin-bottom: 20px;
}

.demo-section h3 {
  margin-bottom: 16px;
  color: #323233;
  font-weight: normal;
  font-size: 14px;
}

.icon-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
}

.icon-item span {
  margin-top: 8px;
  color: #646566;
  font-size: 12px;
}

/* 旋转动画 */
.loading {
  animation: rotate 1.2s linear infinite;
}

.rotate-90 {
  transform: rotate(90deg);
}

.rotate-180 {
  transform: rotate(180deg);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
  